<template>
  <a-select
    show-search
    option-filter-prop="children"
    :placeholder="$t('pleaseSelect') + $t('clause').toLowerCase()"
    :filter-option="filterOption"
    :allow-clear="true"
    :mode="mode"
    :disabled="false"
    v-model="selectedValue"
  >
    <a-select-option v-for="item in options" :key="item.id" :value="item.id">
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    defaultValue: {
      type: String,
      default () {
        return ''
      }
    },
    mode: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: String,
      default: ''
    },
    // 是否默认要选择列表中的第一项
    isSelectFirst: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      additionalClauseTypeDictCode: (state) => state.dict.additionalClauseTypeDictCode
    }),
    options () {
      if (!this.clauseTypeObj) {
        this.getClauseTypeObjData()
      }
      const data = this.$store.state.clause.clauseData.map(item => {
        return {
          ...item,
          name: this.clauseTypeObj && this.clauseTypeObj[item.type]
        }
      })
      return data
    }
  },
  data () {
    return {
      selectedValue: undefined,
      replaceFields: {
        key: 'id',
        value: 'id',
        title: 'name'
      },
      clauseTypeObj: null
    }
  },
  watch: {
    defaultValue: {
      handler (val) {
        if (val !== this.selectedValue) {
          this.selectedValue = this.defaultValue ? this.defaultValue : undefined
        }
      },
      immediate: true
    },
    selectedValue: {
      handler (val) {
        this.$emit('changeoption', this.options.find(item => item.id === val))
      }
    },
    options: {
      handler (val) {
        if (val.length === 0) return
        if (this.isSelectFirst && !this.defaultValue) {
          this.selectedValue = val[0].id
          this.$emit('changeoption', val[0])
        }
      }
    },
    projectId: {
      handler () {
        this.getClauseTypeData()
        this.getData()
      },
      immediate: true
    }
  },
  created () {
  },
  methods: {
    getData () {
      if (!this.projectId) {
        return
      }
      this.$store.dispatch('getClauseData', { projectId: this.projectId })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    getClauseTypeObjData () {
      this.clauseTypeObj = this.$store.getters.getDictCodeObj('additionalClauseTypeDictCode')
    },
    getClauseTypeData () {
      console.log('getClauseTypeData')
      if (this.$store.state.dict.additionalClauseTypeDictCode.length === 0) {
        this.$store.dispatch('getAdditionalClauseTypeDictCodeData').then(() => {
          if (this.isSelectFirst && !this.defaultValue) {
            this.selectedValue = this.$store.state.clause.clauseData[0] && this.$store.state.clause.clauseData[0].id
          }
        })
      }
    }
  }
}
</script>
